<template> 
    <!--新增/编辑界面 DataSet 数据集-->
        <el-form v-loading="load.query" :model="editForm"  label-width="120px" label-position="top" :rules="editFormRules" ref="editFormRef">
            <ContentWrap wrap> 
                <template #header>
                    <el-space wrap >
                         <mdp-select label="数据模型" :loadFun="listModelCacheFirst"  v-model="editForm.dataModel" placeholder="数据模型" :maxlength="50" :init-load="true"/>
                         <mdp-select-data-source label="数据源"  v-model="editForm.dataSource" width="100px" @change="($event)=>{editForm.dataSourcedataSource=$event;}"/>
                         <el-input style="width:600px;" v-model="editForm.title" placeholder="数据集标题" :maxlength="255" />
                         <div><el-button icon="video-play" @click="doPreview" v-loading="load.query">执行</el-button></div>
                         <div>
                            <el-button v-if="currOpType=='add'||currOpType=='edit'" v-loading="load.edit" type="primary" @click="saveSubmit" :disabled="disBtn('addBtn') || !checkBtnQx('addBtn',menuDefId) || load.edit">保存</el-button>
                         </div>
                    </el-space>
                </template>  
              
                <el-form-item label="" prop="dsSql">
                    <el-input type="textarea" rows="10"  v-model="editForm.dsSql" placeholder="数据集sql" :maxlength="65535"  :disabled="  disField"/>
                </el-form-item> 
               <el-row>
                <div class="padding note-style">支持sql中任意位置书写表达式，目前平台内置以下公共变量，可在sql中直接引用:登录用户相关：#{user.userid}、#{user.username}、#{user.branchId}、#{user.deptid}、#{user.roles}
                            公共变量：
                            #{env.platformBranchId}、#{env.date}
                            </div>
               </el-row>
                <PreviewDataList :editableColumn="true" v-if="previewSql" ref="previewSqlRef" :idTitleLinks="editForm.idTitleLinks" :modelValue="previewSql" :dataSource="editForm.dataSource" @loadColumnsEnd="()=>load.query=false"/>
            </ContentWrap>


            
            <el-space>

                <el-input  v-model="editForm.cuserid" placeholder="创建者" :maxlength="50" @change="editSomeFields(editForm,'cuserid',$event)" :disabled="  disField"/>
                <el-date-picker type="date" placeholder="选择日期"  v-model="editForm.ctime"  value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD" :disabled="  disField"/>

                <el-input  v-model="editForm.euserid" placeholder="最后修改人" :maxlength="50" @change="editSomeFields(editForm,'euserid',$event)" :disabled="  disField"/>
                <el-date-picker type="date" placeholder="选择日期"  v-model="editForm.etime"  value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD" :disabled="  disField"/>
            </el-space>
        </el-form> 
</template>

<script>
import * as DataSetApi from '@/api/mdp/dm/dataSet'; 
import {listModelCacheFirst} from '@/api/mdp/dm/model'
import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'
import { MdpFormMixin } from '@/components/mdp-ui/mixin/MdpFormMixin.js'; 
import PreviewDataList from './PreviewDataList.vue';

export default {
    name:'dataSetForm',
    mixins:[MdpFormMixin],
    components: {
        PreviewDataList
    },
    computed: { 
        ...mapState(useUserStore,['userInfo'])
    },
    props:{
        subOpType:{
            type:String,
            default:'add',
        },
        someOn:{
            type: Boolean,
            default: false
        }
    },
    watch: {
        $route(to){
            this.initCurrData();
        },
        'editForm.dsSql':function(val){
            this.previewSql=null
        }
    },
    data() {
        return {
            menuDefId:'',//menu_def.id 菜单表菜单编号，用于按钮权限判断
            pkNames:["id"],//表格主键的java属性名称，驼峰命名，默认为id,支持多主键
            
            editFormRules: {
                id:[
                //{ required: true, message: '此项必填', trigger: 'change' },
                //{ min: 1,max: 200, message: '长度在1到200之间', trigger: 'change'}
                ]
            },
            editForm: {
                id:'',dsSql:'',dataSource:'',dataModel:'',title:'',cuserid:'',cbranchId:'',ctime:'',euserid:'',etime:'',idTitleLinks:''
            },
            //增删改查(含批量)接口
            apis:{
                queryById: DataSetApi.queryDataSetById,
                add: DataSetApi.addDataSet,
                edit: DataSetApi.editDataSet,
                editSomeFields: DataSetApi.editSomeFieldsDataSet
            }, 
            previewSql:'',//点击预览后赋值
            load:{query:false}
        }
    },
    methods: { 
        listModelCacheFirst,
         //由组件扩展添加其它的初始页面的逻辑(mounted+onOpen都会调用此函数，建议只添加公共逻辑)
         initCurrData(){ 
            
            var id=this.$route.params.id
            if(id){
                this.load.query=true
                this.apis.queryById({id:id}).then(res=>{
                    let {tips,data} = res
                    if(tips.isOk){
                        this.editForm=res.data
                        this.currOpType='edit'
                        this.load.query=false
                    }else{
                        this.$message({message:tips.msg,type:'error'})
                    }
                    
                })
            }else{
                this.currOpType='add'
            }
            
           
         },
        /**
         * 检查参数是否满足调用后台接口的条件
         * @returns true / false
         */
        preParamCheck(params){
            var columnCfgs=this.$refs['previewSqlRef']?.columnCfgs
            if(columnCfgs && columnCfgs.length>0){
                var ccfgs=columnCfgs.map(k=>{return {id:k.property,title:k.label}})
                params.idTitleLinks=JSON.stringify(ccfgs)
            }
            
            return true;
        },
        /**
         * 对修改的字段进行判断，返回false ,将取消更新数据库,由组件扩展
         * @param {*} row 当前选中的行
         * @param {*} fieldName 修改的字段名
         * @param {*} $event 修改后的值
         * @param {*} params 将要提交服务器的参数
         * @returns true/false 返回false ,将取消更新数据库
         */
        editSomeFieldsCheck(row,fieldName,$event,params){
           
            params[fieldName]=$event
            return true;
        },
        doPreview(){
            if(!this.editForm.dsSql){
                this.$message({message:'请输入正确的sql语句'})
                return;
            }
            if(!this.editForm.dataSource){
                this.$message({message:'请选择数据源'})
                return;
            }
           
            
            if(this.previewSql && this.previewSql==this.editForm.dsSql){
                this.$refs['previewSqlRef']?.doSearch()
            }else{ 
                this.previewSql=this.editForm.dsSql 
            }
            
        }
    },
    mounted() { 
    }
}

</script>

<style scoped>
.note-style {
  font-family: 'Arial', sans-serif; /* 设置字体 */
  font-size: 14px; /* 设置字号 */
  font-weight: normal; /* 设置字体粗细 */
  font-style: italic; /* 设置字体风格为斜体 */
  color: #333333; /* 设置字体颜色 */
  line-height: 1.5; /* 设置行高 */
}
</style>